<template>
  <div>
    <el-row :span="24" type="flex">
      <el-col :span="5"><h3>项目计划</h3></el-col>
    </el-row>
    <el-divider style="margin: 10px"></el-divider>
    <el-steps :active="activeStep" finish-status="success" simple style="margin-top: 20px" @click="handleStepClick" :clickable="true">
      <el-step v-for="(item,index) in steps" :key="index" :title="item.title" :name="index"></el-step>
    </el-steps>
    <el-form :model="nodePlanForm" label-width="100px" size="small">
      <el-form-item>
        <el-timeline style="margin-left: 0; padding-left:0; margin-top:20px;" ref="timeline">
          <el-timeline-item timestamp="2024/1/12"
                            placement="top" :color="color" index="0">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="工艺" border>
                <template slot="extra"
                          style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="DD天"
                      :value="deadline4"
                      time-indices style="width: 200px; font-size: 15px">
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                  <el-progress :percentage="50" style="font-size: 15px;width: 200px">当前进度</el-progress>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容要求
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>

              </el-descriptions>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2024/2/12"
                            placement="top" :color="color" index="1">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="设计" border>
                <template slot="extra">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="DD天"
                      :value="deadline4"
                      time-indices>
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容要求
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    子任务
                  </template>
                  <el-card style="border-left: 2px solid pink; width: 100%;">
                    <el-descriptions class="margin-top" :column="3" title="设计子任务1标题" border size="mini"
                                     style="width: 100%">
                      <template slot="extra"
                                style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                        <el-statistic
                            ref="statistic"
                            @finish="hilarity"
                            format="DD天"
                            :value="deadline4"
                            time-indices style="width: 200px; font-size: 15px">
                          <template slot="suffix">
                            后到期
                          </template>
                        </el-statistic>
                        <el-progress :percentage="70" style="font-size: 15px;width: 200px">当前进度</el-progress>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          任务名称
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          完成时间
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          负责人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          协作人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          附件
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          工作内容要求
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>

                  <el-card style="border-left: 2px solid pink; width: 100%;">
                    <el-descriptions class="margin-top" :column="3" title="设计子任务2标题" border size="mini"
                                     style="width: 100%">
                      <template slot="extra"
                                style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                        <el-statistic
                            ref="statistic"
                            @finish="hilarity"
                            format="DD天"
                            :value="deadline4"
                            time-indices style="width: 200px; font-size: 15px">
                          <template slot="suffix">
                            后到期
                          </template>
                        </el-statistic>
                        <el-progress :percentage="70" style="font-size: 15px;width: 200px">当前进度</el-progress>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          任务名称
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          完成时间
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          负责人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          协作人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          附件
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          工作内容要求
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>

                  <el-card style="border-left: 2px solid pink; width: 100%;">
                    <el-descriptions class="margin-top" :column="3" title="设计子任务3标题" border size="mini"
                                     style="width: 100%">
                      <template slot="extra"
                                style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                        <el-statistic
                            ref="statistic"
                            @finish="hilarity"
                            format="DD天"
                            :value="deadline4"
                            time-indices style="width: 200px; font-size: 15px">
                          <template slot="suffix">
                            后到期
                          </template>
                        </el-statistic>
                        <el-progress :percentage="70" style="font-size: 15px;width: 200px">当前进度</el-progress>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          任务名称
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          完成时间
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          负责人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          协作人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          附件
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          工作内容要求
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>


                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2024/3/12"
                            placement="top" :color="color" index="2">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="制造" border>
                <template slot="extra">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="DD天"
                      :value="deadline4"
                      time-indices>
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容要求
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    子任务
                  </template>
                  <el-card style="border-left: 2px solid pink; width: 100%;">
                    <el-descriptions class="margin-top" :column="3" title="制造子任务1标题" border size="mini"
                                     style="width: 100%">
                      <template slot="extra"
                                style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                        <el-statistic
                            ref="statistic"
                            @finish="hilarity"
                            format="DD天"
                            :value="deadline4"
                            time-indices style="width: 200px; font-size: 15px">
                          <template slot="suffix">
                            后到期
                          </template>
                        </el-statistic>
                        <el-progress :percentage="70" style="font-size: 15px;width: 200px">当前进度</el-progress>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          任务名称
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          完成时间
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          负责人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          协作人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          附件
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          工作内容要求
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>

                  <el-card style="border-left: 2px solid pink; width: 100%;">
                    <el-descriptions class="margin-top" :column="3" title="制造子任务2标题" border size="mini"
                                     style="width: 100%">
                      <template slot="extra"
                                style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                        <el-statistic
                            ref="statistic"
                            @finish="hilarity"
                            format="DD天"
                            :value="deadline4"
                            time-indices style="width: 200px; font-size: 15px">
                          <template slot="suffix">
                            后到期
                          </template>
                        </el-statistic>
                        <el-progress :percentage="70" style="font-size: 15px;width: 200px">当前进度</el-progress>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          任务名称
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          完成时间
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          负责人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          协作人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          附件
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          工作内容要求
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>

                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2024/4/12"
                            placement="top" :color="color" index="3">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="交付" border>
                <template slot="extra">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="DD天"
                      :value="deadline4"
                      time-indices>
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容要求
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input :disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    子任务
                  </template>
                  <el-card style="border-left: 2px solid pink; width: 100%;">
                    <el-descriptions class="margin-top" :column="3" title="交付子任务1标题" border size="mini"
                                     style="width: 100%">
                      <template slot="extra"
                                style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                        <el-statistic
                            ref="statistic"
                            @finish="hilarity"
                            format="DD天"
                            :value="deadline4"
                            time-indices style="width: 200px; font-size: 15px">
                          <template slot="suffix">
                            后到期
                          </template>
                        </el-statistic>
                        <el-progress :percentage="70" style="font-size: 15px;width: 200px">当前进度</el-progress>
                      </template>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          任务名称
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          完成时间
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          负责人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          协作人
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          附件
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                      <el-descriptions-item>
                        <template slot="label">
                          <i class="el-icon-office-building"></i>
                          工作内容要求
                        </template>
                        <el-input :disabled="true"></el-input>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>


                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit()" type="success">提交审批</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "NodePlan",
  data() {
    return {
      nodePlanForm: {},
      color: 'deeppink',
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      techSubTasks: [],
      designSubTasks: [],
      manuSubTasks: [],
      deliverSubTasks: [],
      fileList: [],
      activeStep: 0,
      steps: [
        {
          title: "工艺"
        },
        {
          title: "设计"
        },
        {
          title: "制造"
        },
        {
          title: "交付"
        }],
    }
  },
  methods: {
    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到",
        duration: 0,
      });
    },
    handleStepClick(index) {
      this.activeStep = index;
      const timeline = this.$refs.timeline;
      const timelineItem = timeline.$children[index];
      const timelineEl = timeline.$el;
      const timelineItemEl = timelineItem.$el;
      const timelineItemOffset = timelineItemEl.offsetTop - timelineEl.offsetTop;
      timeline.scrollTo(timelineItemOffset, 300);
    }
  }
}
</script>

<style scoped>

</style>